<template>
	<view class="contain" >

		<view v-if="isStyle('search')"  class="fixed-top  "   :style="{ 'padding-top': top + 'px','background-color': style['index_nav_color'] }"  >

			<view class="flex-row items-center group justify-between"  style="padding: 20rpx 26rpx"  >


					<getlocation :color="style['index_nav_font_color']"  ></getlocation>


					  <view class="flex-row justify-between items-center flex-auto section"  @click="go('/pages/search/index')" style="margin-right:15px;margin-left:0">
						<view class="flex-row items-center">
						  <image
							class="shrink-0 image_5"
							src="https://qiniu.ccchongya.com/chongya/images/16947555484195366345.png"
						  />
						  <text class="font_3 text_3">请输入您要查找的产品</text>
						</view>
						<view class="flex-col justify-start items-center text-wrapper"  style="border:1px solid #fff;color:#000" ><text class="font_2 text_4"  >搜索</text></view>
					  </view>

						<view v-if="style['index_show_hide_cate'] == '1'" @click="go('/pages/index/cate')"   class="flex f-a-c f-j-c van-icon van-icon-cate  f22-size" style=""></view>
						
						
						
						
						
						<view @click="go('/pages/chat/index')"  class="flex f-a-c f-j-c myicon myicon-xiaoxi  f22-size"  
						style="margin-left:10rpx;position:relative;">
						<text v-if="chatLen > 0"
								class="flex f-a-c f-j-c box-b  t-color-w bg-color-r wrap-len b-radius padding-lr2 "
								style="font-size:18rpx;min-width:30rpx;height:30rpx;position:absolute;top:-20%;left:40%;white-space: nowrap;">{{chatLen}}</text>
						</view>

			</view>


			<!-- 分类 -->
			<view v-if="style['index_show_hide_category'] == '1'" class="h-30"   >
				<scroll-view scroll-x="true" :scroll-into-view="'navs'+active" class="h100 padding-lr12" >
					<view class="flex f-n h100">
						<view @click="active=index" v-for="(item,index) in navs" :key="index" :id="'navs'+index" :class="active == index ? 'navs-on' : ''"  :style="{'color': style['index_nav_font_color']}"  class="flex f-s-0  f-a-c h100 margin-r20   f-w-500">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<view style="padding: 2px;"></view>



		</view>




		<swiper class="wrap-swiper" :current="active" @change="changeSwiper" :indicator-dots="false" :autoplay="false" :interval="1000" :duration="500">
			<swiper-item v-for="(item,parent) in navs" :key="parent">
				<scroll-view @scrolltolower="loadList" scroll-y="true" style="height: 100%;">
					<!-- :style="style['index_background'] | bgimg(700)+''" -->
					<view class="swiper-item padding-12 bbbbbbb"  style="background:url('https://qiniu.ccchongya.com/chongya/1699853720112.png?imageView2/2/w/700') top no-repeat;" >
					<!-- <view class="swiper-item padding-12" > -->
						<block v-if="isStyle('search')">
							<view  v-if="style['index_show_hide_category'] == '1'" :style="{ 'padding-top': top +74+ 'px' }"></view>
							<view  v-if="style['index_show_hide_category'] != '1'" :style="{ 'padding-top': top +44+ 'px' }"></view>
						</block>
						<view v-if="!isStyle('search')"  :style="{ 'padding-top': top +10+ 'px' }"></view>
						<block v-if="parent == 0" >
							<block  v-for="(style,styleIndex) in styleList" :key="styleIndex">

							<swiper v-if="style.moduleKey == 'carousel'"  class="wrap-banner margin-b12  b-radius-5" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
								<swiper-item v-for="(img,index) in style.moduleData.list" :key="index">
									<view @click="cGo(img)" class="bg-img h100 b-radius-12 "     :style="img.img | bgimg(700)+''"></view>
								</swiper-item>
							</swiper>
							<!-- 左一右二 -->
							<!-- <view v-if="style.moduleKey == 'leftOneRightTwo'" class="">
										<view class="flex-row ads3">
											  <image v-if="idx <1 " v-for="(item,idx) in style.moduleData.list"   mode="widthFix"    class="image" :src="item.img" />
											  <view class="flex-col items-center group_2 ads3-left">
												<image v-if="idx >=1 " v-for="(item,idx) in style.moduleData.list"  mode="widthFix"   class="image"  :src="item.img" />
											  </view>
										</view>
							</view> -->
							<view v-if="style.moduleKey == 'leftOneRightTwo'" class="bg-color-w b-radius-5 padding-10 grid grid-c-2 grid-g10 margin-b12">
								<view @click="cGo(item)" class="bg-color bg-img" style="padding: 50%;" v-if="idx <= 0" v-for="(item,idx) in style.moduleData.list" :key="idx" :style="item.img | bgimg(400)+''"></view>
								<view class="flex f-c">
									<view @click="cGo(item)" class="bg-color flex flex-1 bg-img " :class="idx >= style.moduleData.list.length-1 ? 'margin-t10' : ''" v-if="idx > 0" v-for="(item,idx) in style.moduleData.list"  :key="idx" :style="item.img | bgimg(400)+''"></view>
								</view>
							</view>
							<!-- 左二右一 -->
							 <view v-if="style.moduleKey == 'leftTwoRightOne'" class="bg-color-w b-radius-5  grid grid-c-2 grid-g10 margin-b12" >
									<view class="flex-row ads3">
										  <view class="flex-col items-center group_2 ads3-left">
											<image v-if="idx <2 " v-for="(item,idx) in style.moduleData.list"  :key="idx" mode="widthFix" :src="item.img" class="image" />
										  </view>
										  <image v-if="idx >=2 " v-for="(item,idx) in style.moduleData.list"   :key="idx"   mode="widthFix"   class="image" :src="item.img"
										  />
									</view>
							</view>
							<!-- 三列单行 -->
							<view v-if="style.moduleKey == 'flexThree'" class="bg-color-w b-radius-5 padding-10 grid grid-c-3 grid-g10 margin-b12">
								<image @click="cGo(item)" class="w100" v-for="(item,idx) in style.moduleData.list"   :key="idx" :src="item.img | img(400)+''" mode="widthFix"></image>

							</view>
							<!-- 四列单行 -->
							<view v-if="style.moduleKey == 'flexFour'" class="bg-color-w b-radius-5 padding-10 grid grid-c-4 grid-g10 margin-b12">
								<image @click="cGo(item)" class="w100" v-for="(item,idx) in style.moduleData.list"   :key="idx" :src="item.img | img(400)+''" mode="widthFix"></image>
							</view>
							<!-- 五列单行 -->
							<view v-if="style.moduleKey == 'flexFive'" class="bg-color-w b-radius-5 padding-10 grid grid-c-5 grid-g10 margin-b12">
								<image @click="cGo(item)" class="w100" v-for="(item,idx) in style.moduleData.list" :key="idx"  :src="item.img | img(400)+''" mode="widthFix"></image>
							</view>
							<!-- 一张大图 -->
							<view v-if="style.moduleKey == 'flexOne'" class=" b-radius-5  margin-b12">
								<image @click="cGo(item)" class="w100" v-for="(item,idx) in style.moduleData.list" :key="idx"  :src="item.img | img(700)+''" mode="widthFix"></image>
							</view>
							<!-- 二张大图 -->
							<view v-if="style.moduleKey == 'flexTwo'" class=" b-radius-5 over-h bg-color-w  grid grid-c-2 grid-g10  margin-b12">
								<image  @click="cGo(item)" class="w100" v-for="(item,idx) in style.moduleData.list" :key="idx"  :src="item.img | img(700)+''" mode="widthFix"></image>
							</view>
							<!-- 上一下二 -->
							<view v-if="style.moduleKey == 'topOneBottomTwo'" class=" b-radius-5 over-h bg-color-w margin-b12">
								<image  @click="cGo(item)" class="w100 " v-if="idx <= 0" v-for="(item,idx) in style.moduleData.list"  :key="idx" :src="item.img | img(700)+''" mode="widthFix"></image>
								<view class="grid grid-c-2 grid-g10">
									<image  @click="cGo(item)" class="w100" v-if="idx > 0" v-for="(item,idx) in style.moduleData.list" :key="idx"  :src="item.img | img(500)+''" mode="widthFix"></image>
								</view>
							</view>
							<!-- 上二下一 -->
							<view v-if="style.moduleKey == 'topTwoBottomOne'" class=" b-radius-5 over-h bg-color-w margin-b12">
								<view class="grid grid-c-2 grid-g10 margin-b10">
									<image @click="cGo(item)" class="w100" v-if="idx <= 1" v-for="(item,idx) in style.moduleData.list" :key="idx"  :src="item.img | img(500)+''" mode="widthFix"></image>
								</view>
								<image @click="cGo(item)" class="w100 " v-if="idx > 1" v-for="(item,idx) in style.moduleData.list" :key="idx"  :src="item.img | img(700)+''" mode="widthFix"></image>
							</view>
							<!-- 文字图片 -->
							<view  v-if="style.moduleKey == 'textPicture'" class="grid grid-c-4 grid-g10 b-radius-10 bg-color-w wrap-tuijian padding-10 margin-b12">
								<view @click="cGo(item)" v-for="(item,idx) in style.moduleData.list":key="idx"  class="flex f-c f-a-c">
									<text class="t-color-y f15-size f-w-500">{{item.title}}</text>
									<view class="bg-img margin-t10 b-radius-5" style="padding: 50%;" :style="item.img | bgimg(400)+''"></view>
								</view>
							</view>
							<!-- 宫格导航 -->
							<block v-if="style.moduleKey == 'menu'">

							<view  class="grid   b-radius-10 padding-tb10 margin-b12" :class="getMuNum(style.moduleData.list.length)==5?'grid-c-5':'grid-c-4'">
							<!-- <view v-if="style.moduleKey == 'menu'" class="grid grid-c-5  b-radius-10 padding-tb10 margin-b12"> -->
								<view @click="cGo(item)" v-for="(item,idx) in style.moduleData.list"  :key="idx" class="">
									<view class="h-80 flex f-a-c f-j-c"  >
										<image class="w-55 " style="border-radius: 25px;" :src="item.img | img(400)+''" mode="widthFix"></image>
									</view>
									<text class="f12-size t-color-9  flex f-a-c f-j-c">{{item.title}}</text>
						
								</view>
							</view>
							</block>
							<!-- 服务 -->
							<view v-if="style.moduleKey == 'service'" class="bg-color-w   b-radius-10 padding-tb10 ">

								 <serviceCateslist class="margin-t12" showType="2" :isSpread="active == 0 ? true : false"></serviceCateslist>

							</view>


							<!-- 拼团 -->

							<view v-if="style.moduleKey == 'group'" >

							   <view  v-for="(item,idx) in style.moduleData.list" class="b-radius-10 bg-color-w wrap-pintuan margin-b12">
									<view   @click="go('/pages/search/list?type=3')" v-for="(goods,idx)  in item.titleWay"  :key="idx" class="flex padding-lr12 h-40 f-a-c f-j-s">
										<view class="flex f-a-c">
											<text class="f-w-b margin-r8" style="color: rgb(173, 78, 0);">{{goods.title}}</text>
											<text class="f10-size" style="color: rgb(199, 90, 0);">{{goods.desc}}</text>
										</view>
										<view class="flex f-a-c">
											<text class="f12-size t-color-9 margin-r2">{{i18nHot['更多']}}</text>
											<text class="flex f-a-c van-icon van-icon-arrow t-color-9"></text>
										</view>
									</view>
									<view class="flex padding-lr12 ">
										<view @click="go('/pages/goods/detail?id='+goods.id)" v-for="(goods,idx)  in item.listWay"  :key="idx" class="flex  f-s-0 margin-r12 f-c pintuan-item">
											<view :style="goods.mainImg | bgimg(300)+''" class="h-100 bg-img b-radius-8"></view>
											<view class="f12-size line1 margin-t4">{{goods.title}}</view>
											<view class="flex f-a-c f-j-s margin-t4">
												<view class="text-price f16-size t-color-y">{{goods.price}}</view>
												<view class="bg-color-linear-y h-16 t-color-w f10-size padding-lr5 b-radius-30">{{i18nHot['拼']}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 秒杀活动 -->

							<view v-if="style.moduleKey == 'seckill'" >
								<view v-for="(item,idx) in style.moduleData.list" :key="idx"  class="b-radius-10 bg-color-w wrap-tuijian margin-b12 over-h">
									<view @click="go('/pages/search/list?type=2')" v-for="goods in item.titleWay" class="flex padding-lr12 h-40 f-a-c f-j-s">
										<view class="flex f-a-c">
											<text class="f-w-b margin-r8" style="color: rgb(173, 78, 0);">{{goods.title}}</text>
											<text class="f10-size" style="color: rgb(199, 90, 0);">{{goods.desc}}</text>
										</view>
										<view class="flex f-a-c">
											<text class="f12-size t-color-9 margin-r2">{{i18nHot['更多']}}</text>
											<text class="flex f-a-c van-icon van-icon-arrow t-color-9"></text>
										</view>
									</view>
									<view class="flex padding-lr12 ">
										<view @click="go('/pages/goods/detail?id='+goods.id)" v-for="(goods,idx) in item.listWay" :key="idx" class="flex  f-s-0 margin-r12 f-c pintuan-item">
											<view :style="goods.mainImg | bgimg(300)+''" class="h-100 bg-img b-radius-8"></view>
											<view class="f12-size line1 margin-t4">{{goods.title}}</view>
											<view class="flex f-a-c f-j-s margin-t4">
												<view class="text-price f16-size t-color-y">{{goods.price}}</view>
												<view class="bg-color-linear-y h-16 t-color-w f10-size padding-lr5 b-radius-30">{{i18nHot['秒']}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 附近商家 -->
							<view v-if="style.moduleKey == 'shops'">
								<view v-for="(list,index) in style.moduleData.list"  :key="index" class="margin-b4">
								 <shopsList class="margin-t12"  showType="2" :isSpread="active == 0 ? true : false"></shopsList>
								</view>
							</view>
							<!-- 商品分类 -->
							<view v-if="style.moduleKey == 'goods'">
								<view     v-for="(list,index) in style.moduleData.list" :key="index" class="margin-b4">
									<view class="grid grid-c-4 h-40 margin-b10">
										<view @click="chooseStyleCate(styleIndex,index,idx)" v-for="(title,idx) in list['titleWay']" class="flex f-s-0 f-c f-a-c f-j-c h100 ">
											<text :class="list['cateIndex']==idx ? 't-color-y f18-size' : 'f15-size'" class=" flex f-a-c h-24 f-w-500">{{title.title}}</text>
											<text class="f11-size t-color-9">{{title.desc}}</text>
										</view>
									</view>
									<styleGoods class="" :offset="1.2" :cateIndex="list['cateIndex']" :list="list['listWay']"></styleGoods>
								</view>
							</view>
							<!-- 商品分类 -->
							<view v-if="style.moduleKey == 'goods_hot'" class="margin-b4">
								<hots ></hots>
							</view>
							<!-- 商品分类 -->
							<view v-if="style.moduleKey == 'goods_recommend'" class="margin-b4">
								<recommends></recommends>
							</view>
							<view v-if="style.moduleKey == 'goods_with_cates'" class="margin-b4"  style="flex:1;display:flex;height:100%;">


								<catesWithGoodsList></catesWithGoodsList>


							</view>

							<!-- 标题栏 -->
							<view  @click="cGo(list)" v-if="style.moduleKey == 'title'" v-for="(list,index) in style.moduleData.list"   :key="index" :style="{'background-color': list.bk_color}" class=" margin-b12 flex f-a-c f-j-s ">
								<text v-if="list.textAlign != 'left'" class="f11-size padding-10"></text>
								<text class="f16-size"  :style="{'color': list.color}">{{list.title}}</text>
								<text class="f11-size" :style="{'color': list.color1}">{{list.title1}}</text>
							</view>
							<!-- 公告 -->
							<view  v-if="style.moduleKey == 'notice'  && notices" class="flex  flex-row h-40 b-radius-5 ">

									<view class="flex justify-center  items-center">
									<text  class="flex f-a-c f-j-c myicon myicon-gonggao  f16-size t-color-y1"  style="margin-left:10rpx;"></text>
									</view>
									<view class="flex flex-1"  >
										<swiper   class="w100 h100" :circular="true" :vertical="false" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
											<swiper-item  v-for="(notice,index) in  style.moduleData"  :key="index" class="padding-lr10 flex f-a-c">
												<view class="line1"  @click="go('/pages/article/detail?id='+notice.id)" >	{{notice.title}}</view>
											</swiper-item>
										</swiper>
									</view>

							</view>
						    </block>
						</block>
						<block v-else>
							<view v-if="item.children && item.children.length > 0 " class="bg-color-w b-radius-10 flex f-w margin-t12 wrap-sub-cate">
								<view @click="go('/pages/search/list?cateTid='+child.id+'&cateName='+child.name)" v-for="(child,idx) in item.children"  :key="idx" class="flex f-s-0 sub-item f-c f-a-c f-j-c margin-t8">
									<view v-if="child.img" class="flex w-50 h-50 bg-img  b-radius-5" :style="child.img | bgimg(300)+''"></view>
									<view v-else class="flex w-50 h-50 bg-img f-a-c f-j-c myicon  myicon-sucaiku_moren2x f44-size"  style="border-radius:15px;color:rgb(255, 195, 0);background-color: #eeeeee;display:inline-block"></view>
									<view class="f12-size t-color-6 margin-t4">{{child.name}}</view>
								</view>
							</view>
							<view class="padding-6"></view>
						<groupList class="" v-if="active == parent" :catePid="item.id"  :isSpread="active == 0 ? true : false"></groupList>
							<view class="flex f-a-c f-j-c f-w-b t-color-8 padding-tb6 wrap-tuijian-title margin-t12">
								<image class="w-20 margin-r8" src="https://qiniu.ccchongya.com/zan-on.png" mode="widthFix"></image>
								<text>{{i18n['好物分享']}}</text>
							</view>
							<goodsShopList class="margin-t12" v-if="active == parent" showType="2"  :catePid="item.id" :isSpread="active == 0 ? true : false"></goodsShopList>
						</block>
						<!-- <view v-if="isIphonex" class="padding-20"></view> -->
						<view  class="padding-tb8 " style="text-align:center">已经到底部了</view>
						<!-- <view v-if="!isLogin" class="padding-20"></view> -->
						<view v-if="!isLogin" class=""></view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>




		<!-- <notice></notice> -->
		<tab-bar ref="tabbar" :showLogin="!isLogin" :active="0"></tab-bar>
	</view>
</template>
<style scoped lang="scss">
@import url('../../static/css/iconcolor.css');
@import url('@/static/css/index/index.css');



.group {
  padding-left: 16rpx;
}
.image_4 {
  width: 38rpx;
  height: 38rpx;
}
.font_2 {
  font-size: 24rpx;
  font-family: HarmonyOSSansSC;
  line-height: 22rpx;
  color: #666e7a;
}
.text_2 {
  margin-left: 16rpx;
  color: #081329;
}
.section {
  margin-left: 44rpx;
  padding-left: 16rpx;
  background-color: #ffffff;
  border-radius: 342rpx;
  height: 62rpx;
  border: solid 2rpx #ffbd52;
}
.image_5 {
  width: 32rpx;
  height: 30rpx;
}
.font_3 {
  font-size: 20rpx;
  font-family: HarmonyOSSansSC;
  line-height: 22rpx;
  color: #ffffffc2;
}
.text_3 {
  color: #6d6a6b;
  line-height: 19rpx;
}
.text-wrapper {
  padding: 20rpx 0;
  background-color: #ffbd52;
  border-radius: 194rpx;
  width: 90rpx;
  height: 60rpx;
}
.text_4 {
  color: #ffffff;
}








.group_4 {
  padding-left: 40rpx;
  padding-right: 36rpx;
  .font_5 {
    font-size: 32rpx;
    font-family: HarmonyOSSansSC;
    line-height: 30rpx;
    color: #081329;
  }
  .font_2 {
    font-size: 24rpx;
    font-family: HarmonyOSSansSC;
    line-height: 22rpx;
    color: #666e7a;
  }
  .text_6 {
    line-height: 23rpx;
    opacity: 0.6;
  }
  .space-x-8 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-left: 16rpx;
    }
    .text-wrapper_2 {
      padding: 28rpx 0;
      flex: 1 1 120rpx;
      background-color: #ffbd521a;
      border-radius: 10rpx;
      overflow: hidden;
      height: 80rpx;
    }
    .text-wrapper_3 {
      padding: 28rpx 0;
      flex: 1 1 120rpx;
      background-color: #6d6a6b1a;
      border-radius: 10rpx;
      overflow: hidden;
      height: 80rpx;
    }
    .text-wrapper_4 {
      padding: 28rpx 0;
      flex: 1 1 120rpx;
      background-color: #9093ff1a;
      border-radius: 10rpx;
      overflow: hidden;
      height: 80rpx;
    }
    .text-wrapper_5 {
      padding: 28rpx 0;
      flex: 1 1 120rpx;
      background-color: #fe507e1a;
      border-radius: 10rpx;
      overflow: hidden;
      height: 80rpx;
    }
    .text-wrapper_6 {
      margin-right: 4rpx;
      padding: 28rpx 0;
      flex: 1 1 120rpx;
      background-color: #5ab2ff1a;
      border-radius: 10rpx;
      overflow: hidden;
      height: 80rpx;
    }
  }
}
.space-y-12 {
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
    margin-top: 24rpx;
  }
}



.section_9 {
  margin: 0 20rpx;
  padding: 28rpx 20rpx 40rpx 24rpx;
  background-image: linear-gradient(180deg, #fac87826 -36.1%, #ffffff75 92.3%);
  .font_5 {
    font-size: 32rpx;
    font-family: HarmonyOSSansSC;
    line-height: 30rpx;
    color: #081329;
  }
  .font_2 {
    font-size: 24rpx;
    font-family: HarmonyOSSansSC;
    line-height: 22rpx;
    color: #666e7a;
  }
  .text_6 {
    line-height: 23rpx;
    opacity: 0.6;
  }
}


.list-item {
  padding: 0 34rpx 28rpx;
  .image-wrapper_4 {
    background-color: #9e3737;
    border-radius: 12rpx;
    overflow: hidden;
    background-image: url(https://qiniu.ccchongya.com/chongya/images/16947555622972092535.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 236rpx;
    height: 178rpx;
    .image_25 {
      width: 236rpx;
      height: 178rpx;
    }
  }
  .group_6 {
    margin-right: 4rpx;
    .group_7 {
      height: 34rpx;
      .font_7 {
        font-size: 28rpx;
        line-height: 26rpx;
        color: #081329;
      }
      .text_11 {
        margin-top: 8rpx;
      }
      .font_6 {
        font-size: 20rpx;
        line-height: 19rpx;
        color: #c5bfc4;
      }
      .text_10 {
        margin-top: -36rpx;
      }
    }
    .space-x-4 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 8rpx;
      }
      .text-wrapper_7 {
        padding: 12rpx ;
        background-color: #43cf7c1a;
        border-radius: 4rpx;
        // width: 104rpx;
        height: 40rpx;
        .font_8 {
          font-size: 20rpx;
          line-height: 19rpx;
          color: #43cf7c;
        }
      }
      .text-wrapper_8 {
        padding: 12rpx ;
        background-color: #42cccf1a;
        border-radius: 4rpx;
        // width: 104rpx;
        height: 40rpx;
        .font_9 {
          font-size: 20rpx;
          line-height: 19rpx;
          color: #42cccf;
        }
      }
      .text-wrapper_9 {
        padding: 12rpx ;
        background-color: #cf7d421a;
        border-radius: 4rpx;
        // width: 104rpx;
        height: 40rpx;
        .font_10 {
          font-size: 20rpx;
          line-height: 19rpx;
          color: #cf7d42;
        }
      }
    }
    .font_11 {
      font-size: 24rpx;
      line-height: 22rpx;
      color: #666e7a;
    }
  }
  .space-y-14 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 28rpx;
    }
  }
}
.space-x-12 {
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
    margin-left: 24rpx;
  }
}
</style>
<script>


	// #ifdef APP-PLUS
	import appUpdate  from '@/utils/appUpdate';
	// #endif
   import {
        mapMutations
    } from 'vuex';

	import groupList from '@/components/shops/components/groupgoods.vue';
	import goodsList from '@/components/shops/components/goodslist.vue';


	import serviceCateslist from '@/components/shops/components/serviceCateslist.vue';
	import catesWithGoodsList from '@/components/shops/components/catesWithGoodsList.vue';
	import hots from '@/components/hots.vue';
	import recommends from '@/components/recommends.vue';
	import shopsList from '@/components/shops/components/shopslist.vue';
	import getlocation from '@/components/getlocation/index.vue';

	import styleGoods from '@/components/stylegoods.vue';
	const API = require('@/utils/api/common.js').default;
	const $ = require('@/utils/api.js');
	let self = this;
	export default {
		components: {
			getlocation,
			serviceCateslist,
			shopsList,
			groupList,
			goodsList,
			styleGoods,
			catesWithGoodsList,
			hots,
			recommends
		},
		data() {
			return {
					permissionID:'ACCESS_FINE_LOCATION',
				notices:[],
				timer1: null, //排队超时

				statusBarHeight: this.statusBarHeight, //状态栏高度，在main.js里
				region: '请选择...', //地区
				top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
				isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
				isLogin: uni.getStorageSync('token') ? true : false,
				active: 0,
				navs: [],
				pageSize: 20,
				banner: [],
				styleList: [],
				style: '',
				shoptotalPage :0,
				shoplist: [],
				chatLen:0
				
				
				
			};
		},
		// #ifdef MP
		onShareAppMessage: function() {
			return {
				title: "宠易优",
				imageUrl: 'https://qiniu.ccchongya.com/logo2.png',
				path: `/pages/home/index?id=0&inviteCode=${getApp().globalData.inviteCode}` ,
			}
		},
		onShareTimeline: function() {
			  return {
				title: "宠易优",
				imageUrl: 'https://qiniu.ccchongya.com/logo2.png',
				path: `/pages/home/index?id=0&inviteCode=${getApp().globalData.inviteCode}` 
			}
		},
		// #endif
		onLoad: function(options) {
			 self = this;

			 if(!self.$Cache.get('inviteCode')  || !self.$Cache.get('inviteCode')=="undefinded"){
				 getApp().globalData.inviteCode = options.inviteCode ? options.inviteCode : '';
				 self.$Cache.setItem({
					name: 'inviteCode',
					value: options.inviteCode,
				 })
			 }

			 this.init();

			//#ifndef APP-PLUS
			// this.init();
			//#endif
			uni.hideTabBar();

			//#ifdef APP-PLUS
				appUpdate();
			    console.log("plus.runtime.isAgreePrivacy",plus.runtime.isAgreePrivacy())
				if(plus.runtime.isAgreePrivacy()){
					  self.popupState(true)
				}else{
						//弹出自定义隐私政策提示框
				}
			//#endif

		},
        //这个是权限调用前需要调用的方法
		onShow() {
					this.isLogin =  uni.getStorageSync('token') ? true : false;
					
					this.$nextTick(() => {
						this.chatLen =	uni.getStorageSync('chatLen');
						console.log("this.chatLen",this.chatLen)
					});
					
		},
		methods: {


                popupState(state) {
						console.log(state);
						this.init();
						uni.setStorageSync('popupState',state),
						plus.runtime.agreePrivacy();
						// setTimeout(()=>{
						// 	// self.openAuthYk("WRITE_EXTERNAL_STORAGE")
						// 	self.openAuthYk("ACCESS_FINE_LOCATION")

						// },500)
			    },
				// // //这个是自己的方法名
				// openAuthYk(permissionID){
				// 	setTimeout(()=>{
				// 	    self.permissionID = permissionID;
				// 		console.log("---------------------------------------------------------------0000000000000000000000000000000-----------",permissionID)
				// 		self.$refs.authPupYk.open();
				// 	},1000)
				// },
				// //权限获取后的回调函数
				// authSuccess(permissionID){
				// 	console.log('已授权'+permissionID+'该权限,可以调用该权限的API了')
				// 	// this.permissionList[permissionID].status =true

				// 	if(	permissionID =="ACCESS_FINE_LOCATION"){
				// 				console.log('已授权111111')
				// 			self.hasPrmissionLocation = true;
				// 			self.openAuthYk("WRITE_EXTERNAL_STORAGE")
				// 	}
				// 	if(	permissionID =="WRITE_EXTERNAL_STORAGE"){
				// 			console.log('已授权22222')
				// 			this.openAuthYk("CALL_PHONE")
				// 	}
				//     if(	permissionID =="CALL_PHONE"){
				// 				console.log('已授权3333333333')
				// 			this.openAuthYk("CAMERA")
				// 	}
				// 	if(	permissionID =="CAMERA"){
				// 				// console.log('已授权44444444')
				// 			this.openAuthYk("RECORD_AUDIO")
				// 	}
				// 	// if(permissionID=="ACCESS_FINE_LOCATION"){
				// 	// 	this.hasLocationPrmission = true;
				// 	// }
				// 	// uni.showToast({
				// 	//     title:'已授权该权限,可以调用该权限的API了',
				// 	//     icon:'none'
				// 	// })
				// },
			isStyle(type) {
				let arr = [];
				arr = this.styleList.filter((ele) => {
					return ele.moduleKey == type
				})
				return arr.length > 0 ? true : false
			},

			getMuNum(len) {
				if(len%5 ==0){
					return 5
				}else{
					return 4
				}

			},
			chooseStyleCate(parent,index,idx) {
				this.styleList[parent]['moduleData']['list'][index]['cateIndex'] = idx;
			},
			getShopList() {
				$.ajax({
					// url: API.shopListWithShopCate,
						url: "common/shop/getShopWithCateListByCateId",
					data: {
						// shopId: self.shopId,
						// catePid: self.shopId != '' ? '' : self.catePid,
						// cateTid: self.shopId != '' ? '' : self.cateTid,
						// cateId: self.shopId != '' ? '' : self.cateId,
						// shopCatePid: self.shopId != '' ? self.catePid : '',
						// shopCateTid: self.shopId != '' ? self.cateTid : '',
						// shopCateId: self.shopId != '' ? self.cateId : '',
						// title: self.title,
						// type: self.type,//1普通商品>>2秒杀商品>>3拼团商品
						// sort: self.sort,
						// status: '',
						// minAmount: self.min,
						// maxAmount: self.max,
						// provinceCode: self.province,
						page: 1,
						pageSize: self.pageSize,
						spreadStatus: self.spread != '' ? '1' : '',
						longitude: uni.getStorageSync('longitude'),
						latitude: uni.getStorageSync('latitude')
					},
					method: 'GET',
					success(res) {
						let list = [];
						if (self.page != 1) {
							list = self.shoplist.concat(res.data.list);
						} else {
							list = res.data.list ? res.data.list : [];
						}
						self.shoptotalPage = res.data.totalPage;
						self.shoplist  = list;
					}
				})
			},
			getGoodsList() {
				let cate = self.navs[self.active];
				if(cate.list && cate.list.length > 0) {
					return
				}
				cate.page = cate.page ? cate.page : 1;
				cate.totalPage = cate.totalPage ? cate.totalPage : 1;
				$.ajax({
					url: 'common/goods/search',
					data: {
						catePid: cate.id,
						page: cate.page,
						pageSize: self.pageSize,
					},
					method: 'GET',
					success(res) {
						let list = cate.list  ? cate.list : [];
						if (cate.page != 1) {
							cate.list  = list.concat(res.data.list);
						} else {
							cate.list  = res.data.list ? res.data.list : [];
						}
						self.$set(self.navs,self.active,cate);
					}
				})
			},



			async getCate() {

				if(self.style['index_show_hide_category'] != '1') {
					self.navs = [{
							id: '',
							name: self.i18n['推荐']
						}]
					return;
				}
				$.ajax({
					url: 'common/goodsCate/getList',
					data: {},
					method: 'GET',
					success(res) {
						res.data.unshift({
							id: '',
							name: self.i18n['推荐']
						})
						self.navs = res.data;
					}
				})
			},
			changeSwiper(e) {
				self.active = e.detail.current;
				// self.getGoodsList();
			},
			loadList(e) {
				// let cate = self.navs[self.active];
				// if(cate.page < cate.totalPage) {
				// 	cate.page +=1;
				// 	self.getGoodsList();
				// }
			},
			getIndexStyle() {
				let list=[];
				$.ajax({
					url: API.indexStyle,
					data: {},
					method: 'GET',
					success(res) {
						let arr = res.data ? res.data : [];
						if(arr.length > 0) {
							arr.forEach((ele,index) => {
												ele.moduleData = JSON.parse(ele.moduleData);
						
				
								if(ele.moduleKey == 'goods') {//商品分类
									ele.moduleData.list.forEach((ele1,idx1) => {
										ele1['cateIndex'] = 0;
									})
								}
								list.push(ele);
							})
						}
						
						self.styleList = list
					}
				})
			},
			init() {
				this.getIndexStyle();
				this.getStyle().then((res) => {
					console.log(res)
					self.style= res;
				    self.getCate();
				})
				// this.getBanner({
				// 	success(res) {
				// 		self.banner = res.data ? res.data : [];
				// 	}
				// })
				this.getShopList();
			},
		},
		computed: {
			i18n() {
				return this.$t('index')
			},
			i18nHot() {
				return this.$t('hotGroup')
			},
		},
		created() {
		},
		destroyed() {},

		onPullDownRefresh() {
		},
		onReachBottom() {

		}
	}
</script>
